<template>
	<div class="current-date-time-com w-full py-3 text-center">
		<span class="text-sm text-gray-500"> {{ getCurrentDateTime }} </span>
	</div>
</template>

<script lang="ts">
import dayjs from 'dayjs';

export default defineComponent({
	name: 'CurrentDateTime',
	setup() {
		const currentDateTime = ref<string>('0000年00月00日 00:00:00');

		const getCurrentDateTime = computed<string>(() => {
			return currentDateTime.value;
		});

		const updateCurrentDateTime = (): void => {
			currentDateTime.value = dayjs().format('YYYY年MM月DD日 HH:mm:ss');
		};

		onMounted((): void => {
			setInterval((): void => {
				updateCurrentDateTime();
			}, 1000);
		});

		return {
			getCurrentDateTime,
		};
	},
});
</script>
